<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.w3.org/1999/html" layout:decorate="~{layout}">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <title th:text="#{cas.mfa.providerselection.pagetitle}">Duo Login View</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main role="main" class="container mt-3 mb-3">
    <div layout:fragment="content" class="row">
        <div class="card-body">
            <h2 class="card-title">Multifactor Authentication Provider Selection</h2>
            <hr>
            <div class="card-text">
                <div th:each="provider: ${mfaSelectableProviders}">
                    <form name="fm1" method="post" th:action="@{/login}">
                        <h4>
                            <i class="fas fa-laptop"></i>&nbsp;
                            <span th:utext="#{'cas.mfa.providerselection.' + ${provider}}">Provider name goes here</span>
                        </h4>
                        <p th:utext="#{'cas.mfa.providerselection.' + ${provider} + '.notes'}">Provider description goes here</p>
                        <p>
                            <input type="submit" class="btn btn-success" value="Use">
                            <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                            <input type="hidden" name="mfaProvider" th:value="${provider}"/>
                            <input type="hidden" name="_eventId" value="submit"/>
                        </p>
                        <hr>
                    </form>
                </div>
                <p>
                <a class="btn btn-warning" id="cancel" name="cancel" onclick="location.href = location.href;">Cancel</a>
            </div>
        </div>
    </div>
</main>
</body>
</html>
